<script setup lang="ts">
import { ref, computed, h } from 'vue'
import {
  NButton,
  NIcon,
  NModal,
  NSpin,
  NTag,
  NCheckbox,
  NInput,
  NScrollbar,
  NAvatar,
  NDivider
} from 'naive-ui'
import { Plus, Tool, Search, X } from '@vicons/tabler'

const showModal = ref(false)
const handleAddTool = () => {
  showModal.value = true
}

const closeModal = () => {
  showModal.value = false
}

const searchQuery = ref('')
const tools = ref([
  {
    key: 'googleGroup',
    name: 'Google',
    type: 'group',
    children: [{ key: 'google', name: 'Google', added: true }]
  },
  {
    key: 'duckduckgoGroup',
    name: 'DuckDuckGo',
    type: 'group',
    children: [
      { key: 'duckduckgoChat', name: 'DuckDuckGo AI聊天', added: false },
      { key: 'duckduckgoImage', name: 'DuckDuckGo 图片搜索', added: false },
      { key: 'duckduckgoSearch', name: 'DuckDuckGo 搜索', added: false },
      { key: 'duckduckgoTranslate', name: 'DuckDuckGo 翻译', added: false }
    ]
  }
])

const filteredTools = computed(() => {
  return tools.value.flatMap((group) =>
    group.type === 'group'
      ? group.children.filter((tool) =>
          tool.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      : group.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        ? [group]
        : []
  )
})

const toggleTool = (tool) => {
  tool.added = !tool.added
}

const categories = [
  { key: 'inbuilt', name: '内置', icon: Tool, isIcon: true, count: 0 },
  { key: 'custom', name: '自定义', icon: Tool, isIcon: true, count: 0 },
  { key: 'workflow', name: '工作流', icon: Tool, isIcon: true, count: 0 },
  { key: 'category', name: '类别', icon: Tool, isIcon: true, count: 0, type: 'group' },
  { key: 'all', name: '全部', icon: Tool, isIcon: true, count: 0 },
  { key: 'search', name: '搜索', icon: Search, isIcon: true, count: 0 },
  { key: 'image', name: '图片', icon: Tool, isIcon: true, count: 0 }
]

const selectedCategory = ref('all')
const avatarContent = (categorieItem) => {
  if (categorieItem.isIcon) {
    return h(NIcon, { size: 15 }, { default: () => h(categorieItem.icon) })
  } else {
    return h(NAvatar, { size: 15, src: categorieItem.icon })
  }
}
</script>

<template>
  <div class="w-full p-4 rounded-lg bg-[#F9F9F9]">
    <div class="flex items-center justify-between mb-4">
      <div class="flex items-center">
        <n-icon size="20" :component="Tool" color="#6938EF" />
        <span class="ml-2 text-lg font-medium mr-1">工具</span>
        <CustomTooltip
          content="工具可以在对话中使用，如: 翻译, 搜索, 图片搜索等"
          placement="right"
        />
      </div>
      <n-button quaternary @click="handleAddTool" size="small" class="rounded-lg">
        <template #icon>
          <n-icon size="13"><Plus /></n-icon>
        </template>
        添加
      </n-button>
    </div>
  </div>

  <n-modal
    v-model:show="showModal"
    :style="{
      position: 'absolute',
      right: '10px',
      width: '650px',
      top: '10px',
      height: 'calc(100vh - 20px)'
    }"
    :mask-closable="false"
    class="rounded-2xl bg-white bg-white"
    :closable="false"
  >
    <div class="flex flex-col h-full">
      <div class="flex flex-grow">
        <div
          class="w-1/4 pr-4 border-gray-200 border-solid border-r-1px bg-#F2F4F7 p-10px rounded-l-2xl"
        >
          <div class="text-lg font-medium mb-4">添加工具</div>
          <n-button type="primary" class="mb-4 w-full rounded-lg"> + 创建自定义工具 </n-button>
          <n-scrollbar style="max-height: calc(100vh - 150px)">
            <div class="space-y-2">
              <div
                v-for="category in categories"
                :key="category.key"
                @click="selectedCategory = category.key"
                :class="{ 'font-bold bg-gray-100 rounded p-2': selectedCategory === category.key }"
                class="cursor-pointer flex items-center space-x-2 p-2 hover:bg-gray-100 rounded"
              >
                <n-icon :component="category.icon" />
                <span>{{ category.name }}</span>
              </div>
            </div>
          </n-scrollbar>
        </div>
        <div class="w-3/4 pl-4">
          <div class="flex items-center justify-between mb-4">
            <n-input v-model:value="searchQuery" placeholder="搜索" class="flex-grow mr-4">
              <template #prefix>
                <n-icon><Search /></n-icon>
              </template>
            </n-input>
            <n-icon size="20" class="cursor-pointer" @click="closeModal">
              <X />
            </n-icon>
          </div>
          <n-scrollbar style="max-height: calc(100vh - 150px)">
            <div class="space-y-4">
              <template v-for="(tool, index) in filteredTools" :key="tool.key">
                <div v-if="tool.type === 'group'" class="mb-2">
                  <div class="font-bold mb-2">{{ tool.name }}</div>
                  <div
                    v-for="child in tool.children"
                    :key="child.key"
                    class="flex justify-between items-center py-2"
                  >
                    <span>{{ child.name }}</span>
                    <n-button
                      @click="toggleTool(child)"
                      size="small"
                      :type="child.added ? 'default' : 'primary'"
                      class="rounded"
                    >
                      {{ child.added ? '已添加' : '+ 添加' }}
                    </n-button>
                  </div>
                </div>
                <div v-else class="flex justify-between items-center py-2">
                  <span>{{ tool.name }}</span>
                  <n-button
                    @click="toggleTool(tool)"
                    size="small"
                    :type="tool.added ? 'default' : 'primary'"
                    class="rounded"
                  >
                    {{ tool.added ? '已添加' : '+ 添加' }}
                  </n-button>
                </div>
                <n-divider v-if="index < filteredTools.length - 1" />
              </template>
            </div>
          </n-scrollbar>
        </div>
      </div>
    </div>
  </n-modal>
</template>

<style scoped>
/* Add any additional styles here if needed */
</style>
